<div class="container">
    <div class="row">
        <div class="col-sm-12 col-lg-4 my-lg-5 order-lg-last text-center text-lg-start">
            <p>
                <label><span class="d-block mt-3 mb-1">Value</span><RadzenSlider Min="0" Max="260" @bind-Value=@value Style="width: 200px;" /></label>
            </p>
            <p>
                <label><span class="d-block mt-3 mb-1">Tick position</span><RadzenDropDown @bind-Value=@tickPosition Data=@tickPositions Style="width: 200px;" /> </label>
            </p>
            <p>
                <label class="mt-3"><RadzenCheckBox @bind-Value=@showValue /> Show the pointer value</label>
            </p>
        </div>
        <div class="col-sm-12 col-lg-8 my-3 my-lg-5">
            <RadzenRadialGauge Style="width: 100%; height: 300px;">
                <RadzenRadialGaugeScale StartAngle="-150" EndAngle="150" Step="20" Min="0" Max="260" TickPosition=@tickPosition>
                    <RadzenRadialGaugeScalePointer Value=@value Length="0.6" ShowValue=@showValue>
                        <Template Context="pointer">
                            <h4>
                                @pointer.Value <sup>km/h</sup>
                            </h4>
                        </Template>
                    </RadzenRadialGaugeScalePointer>
                    <RadzenRadialGaugeScaleRange From="0" To="90" Fill="green" />
                    <RadzenRadialGaugeScaleRange From="90" To="140" Fill="orange" />
                    <RadzenRadialGaugeScaleRange From="140" To="260" Fill="red" />
                </RadzenRadialGaugeScale>
            </RadzenRadialGauge>
        </div>
    </div>
</div>

@code {
    bool showValue = true;
    double value = 100;
    IEnumerable<GaugeTickPosition> tickPositions = Enum.GetValues(typeof(GaugeTickPosition)).Cast<GaugeTickPosition>();
    GaugeTickPosition tickPosition = GaugeTickPosition.Inside;
}